<template>
    <!-- 最外层只能有一个组件，不能出现多个 -->
    <!-- 最外层class命名规则 工程-文件路径-文件名  -->
    <div class="iviewStudy-datepicker-datePickerIndex">
        <div>
            <DatePicker v-model="startDate" type="datetime" @on-ok="changeStr('startDate')" format="yyyy-MM-dd" placeholder="选择日期和时间" style="width: 200px"></DatePicker>
            {{startDateStr}}
        </div>
        <div class="margin-top-15">
            <DatePicker v-model="endDate" type="datetime" @on-ok="changeStr('endDate')"format="yyyy-MM-dd" placeholder="选择日期和时间" style="width: 200px"></DatePicker>
            {{endDateStr}}
        </div>

        <!-- 显示HTML代码 -->
        <pre>
            <code class="html" v-text="htmlCode">
            </code>
        </pre>
        <!-- 显示JavaScript代码 -->
        <pre>
            <code  class="javascript" v-text="jsCode">
            </code>
        </pre>

    </div>
</template>

<script>
    import hljs from 'highlight.js'

    export default {
        mounted: function () {
            window.setTimeout(function () {
                $('.iviewStudy-datepicker-datePickerIndex pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 500);
        },

    data: function () {
            return {
                startDate:null,
                startDateStr:"",
                endDate:null,
                endDateStr:"",
                htmlCode: `
        <div>
            <DatePicker v-model="startDate" type="datetime" @on-ok="changeStr('startDate')" format="yyyy-MM-dd" placeholder="选择日期和时间" style="width: 200px"></DatePicker>
            {{startDateStr}}
        </div>
        <div class="margin-top-15">
            <DatePicker v-model="endDate" type="datetime" @on-ok="changeStr('endDate')"format="yyyy-MM-dd" placeholder="选择日期和时间" style="width: 200px"></DatePicker>
            {{endDateStr}}
        </div>
                `,
                jsCode: `
           changeStr: function (typeStr){
                if(typeStr == "startDate"){
                  this.startDateStr = this.startDate.dateStart();
                }else{
                    this.endDateStr = this.endDate.dateEnd();
                }
            }
                `
            }
        },
        methods: {
            changeMenu: function (menuName){
                // 命名的路由
                this.$router.push({ name: menuName})
            },
            changeStr: function (typeStr){
                if(typeStr == "startDate"){
                  this.startDateStr = this.startDate.dateStart();
                }else{
                    this.endDateStr = this.endDate.dateEnd();
                }
            }
        },
    }
</script>

<style scoped lang="scss">
    /***
    scoped ： 表示当前写的样式是针对当前页面的，对其他页面没有影响
    lang="scss": 表示我写的样式代码是针对SASS的，不是less等。强调，属性的值是scss
    ***/
    .iviewStudy-datepicker-datePickerIndex{
        .demo-content{
            margin: 15px 0;
        }
        .margin-top-15{
            margin-top: 15px;
        }
    }
</style>

